<!--
 * @Author: zhou5228 10892268+zhou5228@user.noreply.gitee.com
 * @Date: 2022-11-15 15:58:09
 * @LastEditors: zhou5228 10892268+zhou5228@user.noreply.gitee.com
 * @LastEditTime: 2022-12-06 17:29:57
 * @FilePath: \project-name\src\components\index\content\Clocking.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="health">
        <h1>每日健康打卡</h1>
        <div class="Form">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                <el-form-item label="姓名" prop="name" readonly>
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="小区住址" prop="address">
                    <el-input v-model="ruleForm.address"></el-input>
                </el-form-item>
                <el-form-item label="体温（℃）" prop="temperature">
                    <el-input v-model="ruleForm.temperature"></el-input>
                </el-form-item>
                <el-form-item label="健康码" prop="healthCode">
                    <el-select v-model="ruleForm.healthCode" placeholder="请选择健康码颜色">
                        <el-option label="绿码" value="绿码"></el-option>
                        <el-option label="黄码" value="黄码"></el-option>
                        <el-option label="红码" value="红码"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="身体状况" prop="type">
                    <el-checkbox-group v-model="ruleForm.type">
                        <el-checkbox label="健康" name="type"></el-checkbox>
                        <el-checkbox label="感冒" name="type"></el-checkbox>
                        <el-checkbox label="咳嗽" name="type"></el-checkbox>
                        <el-checkbox label="发热" name="type"></el-checkbox>
                        <el-checkbox label="乏力" name="type"></el-checkbox>
                        <el-checkbox label="其他情况" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="打卡时间" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                                style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="date2">
                            <el-time-picker placeholder="选择时间" v-model="ruleForm.date2"
                                style="width: 100%;" value-format="HH:mm:ss"></el-time-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

export default {
    name: "clocking",
    data() {
        return {
            input: "",
            ruleForm: {
                name: '',
                address: '',
                phone: '',
                temperature: '',
                healthCode: '',
                date1: '',
                date2: '',
                type: [],
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请输入详细住址', trigger: 'blur' },
                    { min: 6, max: 14, message: '长度在 6 到 14 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度为11个字符', trigger: 'blur' }
                ],
                temperature: [
                    { required: true, message: '请输入体温', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                healthCode: [
                    { required: true, message: '请选择健康码颜色', trigger: 'change' }
                ],
                date1: [
                    { type: 'string', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'string', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个身体状况', trigger: 'change' }
                ]
            }
        };
    },
    created() {
        this.Clist = JSON.parse(this.$route.query.Clist ? this.$route.query.Clist : '{}')
        console.log(this.Clist.address);
        this.ruleForm.name = this.Clist.name
        this.ruleForm.address = this.Clist.address
        this.ruleForm.phone = this.Clist.phone
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                    console.log(this.ruleForm);
                    this.$router.push({
                        path:'/index/user/recordc',
                        query:{
                            getC: JSON.stringify(this.ruleForm)
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    }
};
</script>

<style scoped>
.health h1 {
    margin: 20px 50px 30px 0;
}

.health .Form {
    margin: 0 auto;
    padding-right: 50px;
    width: 500px;
}

.health .Form /deep/.el-form-item__label {
    font-size: 18px;
}

.health .Form /deep/.el-form-item__label::after {
    content: "：";
    font-weight: bold;
}
</style>